<template>
  <div class="join-view">
    <div class="card">
      <h2>加入房间</h2>
      <div class="form">
        <label>房间ID</label>
        <div class="row">
          <input v-model.trim="roomIdInput" type="text" placeholder="请输入房间ID" />
          <button class="primary" :disabled="!roomIdInput" @click="handleJoin">加入</button>
        </div>
      </div>
      <div v-if="roomInfo" class="room-info">
        <div class="info-row"><span>房间名</span><span>{{ roomInfo.roomName }}</span></div>
        <div class="info-row"><span>人数</span><span>{{ roomInfo.currentPlayers }}/{{ roomInfo.maxPlayers }}</span></div>
        <div class="info-row"><span>状态</span><span class="status" :class="statusClass">{{ statusText }}</span></div>
      </div>
      <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
    </div>
  </div>
  <RoomMembersDialog :visible="showMembers" :room="roomStore.currentRoom" :mock="true" @close="showMembers=false" />
</template>

<script setup>
import { ref, onMounted, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useRoomStore } from '@/stores/room'
import { roomAPI } from '@/api'
import RoomMembersDialog from '@/components/rooms/dialogs/RoomMembersDialog.vue'

const route = useRoute()
const router = useRouter()
const roomStore = useRoomStore()

const roomIdInput = ref('')
const showMembers = ref(false)
const errorMessage = ref('')
const roomInfo = ref(null)

const statusText = computed(() => {
  const s = (roomInfo.value?.status || '').toLowerCase()
  if (s === 'playing') return '游戏中'
  if (s === 'finished') return '已结束'
  return '等待中'
})
const statusClass = computed(() => {
  const s = (roomInfo.value?.status || '').toLowerCase()
  return { playing: s === 'playing', finished: s === 'finished', waiting: s !== 'playing' && s !== 'finished' }
})

const tryJoin = async (roomId) => {
  if (!roomId) return
  try {
    errorMessage.value = ''
    const res = await roomStore.joinRoom(roomId)
    // 视为成功（包括已在房间的友好提示）后，展示成员弹窗
    showMembers.value = true
  } catch (e) {
    errorMessage.value = e?.response?.data?.message || e?.message || '加入房间失败'
  }
}

const handleJoin = async () => {
  await tryJoin(roomIdInput.value)
}

onMounted(async () => {
  const rid = route.params.roomId
  if (typeof rid === 'string' && rid) {
    roomIdInput.value = rid
    await loadRoomInfo(rid)
  }
})

const loadRoomInfo = async (roomId) => {
  try {
    const res = await roomAPI.getRoomInfo(roomId)
    const data = res?.data || res
    if (data) roomInfo.value = data
  } catch (_) { roomInfo.value = null }
}

watch(roomIdInput, (v) => { if (v) loadRoomInfo(v) })
</script>

<style scoped>
.join-view { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f5f7fb; padding: 20px; }
.card { width: 100%; max-width: 420px; background: #fff; border: 1px solid #eef2f7; border-radius: 14px; padding: 20px; box-shadow: 0 24px 48px rgba(2,6,23,.06); }
.card h2 { margin: 0 0 16px; font-size: 20px; font-weight: 800; color: #0f172a; }
.form { display: grid; gap: 10px; }
label { font-size: 12px; color: #475569; }
input { flex: 1; height: 40px; padding: 0 12px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 14px; }
.row { display: flex; gap: 8px; }
.primary { height: 40px; border: none; border-radius: 8px; background: #2563eb; color: #fff; font-weight: 600; cursor: pointer; padding: 0 14px; }
.primary:disabled { opacity: .5; cursor: not-allowed; }
.error { margin-top: 10px; color: #dc2626; font-size: 12px; }
.room-info { margin-top: 14px; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px; background: #fafbff; }
.info-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; font-size: 13px; color: #334155; }
.status { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.status.waiting { background: #eef2ff; color: #3730a3; }
.status.playing { background: #ecfdf5; color: #065f46; }
.status.finished { background: #fee2e2; color: #991b1b; }
</style>


